<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">

<meta charset="UTF-8">
<title>VRD中心展示</title>
<meta name="viewport"
  content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link rel="stylesheet" type="text/css"
	href="bootstrap3/css/bootstrap.css"> -->
<link rel="stylesheet"
  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
  href="bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<style type="text/css">
body {
	background-color: white;
	padding-top: 20px;
}

navbar {
	border: 0;
}

#logo {
	position: relative;
	top: -10px;
}
/* 导航栏鼠标悬停时为黄色 */
.nav.navbar-nav>li>a:hover {
	color: #ffc600;
}

#search>input {
	border-radius: 30px;
	border: none;
	height: 30px;
	padding: 10px 20px;
	background-color: rgb(232, 240, 254);
	position: relative;
	top: 10px;
	outline: none; /* 去掉点击后的外边框 */
}

.glyphicon {
	background-color: rgba(0, 0, 0, 0);
	border: none;
	color: gray;
	position: relative;
	top: 13px;
	left: -40px;
	outline: none;
}
/* 瀑布流相关 */
.grid-item {
	width: 200px;
	margin: 0 10px 10px 0;
}
/* 列表组 */
.list-group-item-heading {
	background-color: rgb(240, 240, 240);
}
/* 蓝色信息条样式 */
.floatView {
	height: 40px;
	width: 100%;
	background-color: #0aa1ed;
	position: absolute;
	bottom: 0;
	text-align: center;
	color: #ffc600;
}

.floatView>p {
	margin: 0;
	font-size: 12px;
}
/* 给图片添加缩放动画 */
img {
	transition-duration: 1s;
}

img:hover {
	transform: scale(1.2); /* 鼠标移入时缩放1.2倍大小 */
}

a:hover {
	cursor: pointer;
}

.grid-item {
	overflow: hidden; /* 为了实现缩放超出的内容不显示 */
}

#loadmore {
	border: 0;
	outline: none;
}
</style>
</head>
<body>
  <header class="container">
    <!-- 头部居中 -->
    <!-- logo -->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"> <img id="logo"
            alt="Brand" src="images/logo.png">
          </a>
        </div>
        <!-- 无序列表 -->
        <ul class="nav navbar-nav">
          <li><a href="HomeServlet">首页</a></li>
          <li th:each="c:${list}"><a th:text=${c.name}
            th:href="'HomeServlet?id='+${c.id}">手绘</a></li>
          <li>
            <form action="HomeServlet">
              <div id="search">
                <input type="text" name="keyword">
                <button type="submit" class="glyphicon glyphicon-search"></button>
              </div>
            </form>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <!-- th:if="${user}==null 如果context中的user为空说明没有登录过，
		    	没有登录就显示登录入口-->
          <li th:if="${user}==null"><a href="ShowLoginServlet"
            class="fa fa-user-circle-o">管理员入口</a></li>
          <li th:if="${user}==null"><a href="ShowRegServlet"
          	class="fa fa-user-circle-o">注册</a></li>
          <li th:if="${user}!=null"><a href="ShowBannerServlet"
            class="fa fa-user-circle-o">轮播图</a></li>
          <li th:if="${user}!=null"><a href="ShowSendServlet"
            class="fa fa-user-circle-o">发布作品</a></li>
          <li th:if="${user}!=null"><a href="LogoutServlet"
            class="fa fa-user-circle-o">登出</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <!--主题  -->
  <section>
    <!-- 轮播图 -->
    <div class="container">
      <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
          <li th:each="banner:${bList}" data-target="#myCarousel"
            data-slide-to="0" id="banner_data"></li>
          <!--  <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li> -->
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div class="item banner_item" th:each="banner:${bList}">
            <img th:src=${banner.imgPath} alt="First slide">
            <div class="carousel-caption"></div>
          </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel"
          role="button" data-slide="prev"> <span
          class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a> <a class="right carousel-control" href="#myCarousel"
          role="button" data-slide="next"> <span
          class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

    <!-- 通过栅格系统划分为9:3二部分 作品 -->
    <div class="container" style="margin-top: 10px;">
      <div class="row">
        <!-- 左侧内容 -->
        <div class="col-md-9">
          <!-- 瀑布流开始 -->
          <div class="grid">
            <div th:each="p:${pList}" class="grid-item">
              <a th:href="'DetailServlet?id='+${p.id}"> <img
                th:src=${p.imgPath} class="img-responsive">
              </a>
              <!-- 蓝色信息条开始 -->
              <div class="floatView">
                <p th:text=${p.title}></p>
                <span th:text=${p.viewCount} class="fa fa-eye">100</span>
                <span th:text=${p.likeCount} class="fa fa-thumbs-o-up">60</span>
              </div>
              <!-- 蓝色信息条结束 -->
            </div>
          </div>
          <!-- 加载更多信息 -->
          <button id="loadmore"
            class="btn btn-danger btn-lg center-block">加载更多</button>
          <!-- 瀑布流结束 -->
        </div>
        <!-- 右侧内容 -->
        <div class="col-md-3">
          <!-- 浏览最多开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3 class="fa fa-eye">浏览最多</h3>
            </li>
            <li th:each="p:${viewList}" class="list-group-item">
              <!-- 左对齐多媒体对象 -->
              <div class="media">
                <div class="media-left">
                  <a th:href="'DetailServlet?id='+${p.id}"> <img
                    th:src=${p.imgPath} class="media-object"
                    style="width: 60px; height: 50px;">
                  </a>
                </div>
                <div class="media-body">
                  <a th:href="'DetailServlet?id='+${p.id}">
                    <h4 th:text=${p.title} class="media-heading">左对齐</h4>
                  </a>
                  <p th:text=${p.intro}>这是一些示例文本...</p>
                </div>
              </div>
            </li>
          </ul>
          <!-- 浏览最多结束-->

          <!-- 最受欢迎开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3 class="fa fa-eye">最受欢迎</h3>
            </li>
            <li th:each="p:${likeList}" class="list-group-item">
              <!-- 左对齐多媒体对象 -->
              <div class="media">
                <div class="media-left">
                  <a th:href="'DetailServlet?id='+${p.id}"> <img
                    th:src=${p.imgPath} class="media-object"
                    style="width: 60px; height: 50px;">
                  </a>
                </div>
                <div class="media-body">
                  <a th:href="'DetailServlet?id='+${p.id}">
                    <h4 th:text=${p.title} class="media-heading">左对齐</h4>
                  </a>
                  <p th:text=${p.intro}>这是一些示例文本...</p>
                </div>
              </div>
            </li>
          </ul>
          <!-- 最受欢迎结束-->
        </div>
      </div>
    </div>
  </section>

  <footer class="well container">
    <b>Copyright © 2018 Tedu.cn All Rights Reserved
      京ICP备08000853号-56 <a href="#">虚拟偶像培养有限科技公司</a> 版权所有
    </b>
    <!-- 内容要显示到右侧pull-right 等效float:right -->
    <span class="pull-right"><b>Version</b> 0.1.0</span>
  </footer>

</body>
<script type="text/javascript" src="bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="bootstrap3/js/respond.min.js"></script>
<!-- 引入瀑布流相关框架文件 -->
<script type="text/javascript" src="js/imagesloaded.pkgd.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>

<script>
	//取出轮播图中的第一个
	$(".banner_item").eq(0).attr("class", "item active");
	$("#banner_data").eq(0).attr("class", "active");

	$("#myCarousel").carousel('cycle')
	$("#myCarousel").carousel({
		interval : 2000
	});

	/* 初始化瀑布流 */
	//itemSelector告诉瀑布流框架，每一个元素的选择器是什么
	$(".grid").masonry({
		itemSelector : ".grid-item",
		columWidth : 210
	});

	//所有图片加载完之后调用该方法
	$(".grid").imagesLoaded().progress(function() {
		//设置布局,该方法要在所有图片都加载完之后才开始执行
		$(".grid").masonry("layout");
	})

	//动画相关代码，页面加载出来所有蓝色信息条隐藏
	$(".floatView").fadeOut();
	//给每个瀑布流对象添加鼠标移入移出事件
	$(".grid-item").hover(function() {
		$(this).children("div").stop();//停止之前未完成的动画
		$(this).children("div").fadeIn(500);
	}, function() {
		$(this).children("div").stop();
		$(this).children("div").fadeOut(500);
	})

	//给加载更多添加点击事件
	$("#loadmore").click(function() {
    	//点击按钮时通过ajax发出异步请求
    	//type请求方式get/post
    	//url请求路径
    	//data请求参数
    	//success请求成功后执行的方法，msg为服务器返回的数据
    	$.ajax({
  				type : "get",
  				url : "LoadMoreServlet",
  				data : "count=" + $(".grid-item").length,
  				success : function(msg) {
  					//alert(msg);
  					if(msg=="[]"){
  						alert("没有更多信息了！");
  					}else{
  					//把接收到的josn字符串转换成对象
  	  					var list = JSON.parse(msg);
  	  					//遍历list集合
  	  					for (var i = 0; i < list.length; i++) {
  	  						//遍历出list中的每一个作品信息
  	  						var p = list[i];
  	  						var item = $('<div class="grid-item"><a><img class="img-responsive"></a><div class="floatView"><p></p><span class="fa fa-eye"></span><span class="fa fa-thumbs-o-up"></span></div></div>');
  	  						item.find("img").attr("src",p.imgPath);
  	  						item.find("p").text(p.title);
  	  						item.find("span").eq(0).text(p.viewCount);
  	  						item.find("span").eq(1).text(p.likeCount);
  	  						item.find("a").attr("href","DetailServlet?id="+p.id);
  	  						$(".grid").append(item);
  	  						$(".grid").masonry("appended", item);
  	  						$(".floatView").fadeOut();
  	  
  	  						//给每个瀑布流对象添加鼠标移入移出事件
  	  						item.hover(function() {
  	  							$(this).children("div").stop();//停止之前未完成的动画
  	  							$(this).children("div").fadeIn(500);
  	  						}, function() {
  	  							$(this).children("div").stop();
  	  							$(this).children("div").fadeOut(500);
  	  						})
  	  					}
  	  					//所有图片加载完之后调用该方法
  	  					$(".grid").imagesLoaded().progress(
  							function() {
  								//设置布局,该方法要在所有图片都加载完之后才开始执行
  								$(".grid").masonry("layout");
  						})
  					}
  				}
  			});
    })
</script>
</html>

















